<template>
  <div>
    <h2>Message</h2>
    <ul>
      <li v-for="detail in details" :key="detail.id">
        <!-- <router-link :to="`/home/message/detail/${detail.id}`">
          {{ detail.info }}
        </router-link> -->
        <router-link
          :to="{
            name: 'Detail',
            params: { id: detail.id },
            query: { name: '张三', age: 18 },
          }"
          >{{ detail.info }}</router-link
        >
        <button @click="push(detail.id)">push</button>
        <button @click="replace(detail.id)">replace</button>
      </li>
    </ul>
    <button @click="go">go</button>
    <button @click="back">back</button>
    <router-view username="李四" age="18" />
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      details: [],
    }
  },
  methods: {
    push(id) {
      // this.$router.push(`/home/message/detail/${id}`)
      this.$router.push({
        name: 'Detail',
        params: { id },
        query: { name: '张三', age: 18 },
      })
    },
    replace(id) {
      this.$router.replace(`/home/message/detail/${id}`)
    },
    go() {
      this.$router.go(1)
    },
    back() {
      this.$router.go(-1)
    },
  },
  mounted() {
    setTimeout(() => {
      this.details = [
        { id: 1, info: 'detail1' },
        { id: 2, info: 'detail2' },
        { id: 3, info: 'detail3' },
        { id: 4, info: 'detail4' },
        { id: 5, info: 'detail5' },
      ]
    }, 500)
  },
}
</script>

<style></style>
